<script setup>
import { leftBottom } from "@/api";
// import SeamlessScroll from "@/components/seamless-scroll";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { useSettingStore } from "@/stores/setting.js";
import { ElMessage } from "element-plus";
import Chart from "@/components/Chart/index.vue";
const carouselRef = ref()
const legendData = ref([])
legendData.value=['燃气日接入量','供热日接入量','12345转发量']
const xData = ref([])
// 时间是从当前时，往后数一共12个小时
// 设置小时数为当前时间的小时数加12
function printNext12Hours() {
  for (let i = 0; i < 12; i++) {
    const now = new Date();
    now.setHours(now.getHours() + i);
    xData.value.push(now.toLocaleString('zh-CN', {hour: '2-digit'}))
  }
}
printNext12Hours();
let data = [[],[],[]]
for (let i =0; i < xData.value.length; i++) {
  data[0].push(100*Math.ceil(Math.random() * 10)) //100*0-10随机数
  data[1].push(100*Math.ceil(Math.random() * 10))
  data[2].push(10*Math.ceil(Math.random() * 10))
}
const color= [ '#ffce00','#FF00FF', '#47ffff','#8630f5', ]
const seriesData = legendData.value.map((v,i)=>{
  return {
      name: v,
      data: data[i],
      type: 'scatter',
      symbolSize: function (data) {
        return Math.sqrt(data) * 1.5;
      },
      label: {
          // show: true,//显示具体值
          // formatter: function (params) {
          //   console.log(params)
          //   return params.value;
          // },
          position: 'top',
          fontSize: 18
      },
      emphasis: {
        focus: 'series',
      //   label: {//聚焦时再显示具体值
      //     show: true,
      //     formatter: function (param) {
      //       return param.data[3];
      //     },
      //     position: 'top'
      //   }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        color: color[i]
      }
    }
  }
)
const options = ref({})
options.value = {
  color,
  backgroundColor: 'transparent',
  // title: {
  //   text: 'rgdhf',
  //   left: '5%',
  //   top: '3%'
  // },
  legend: {
    top: '3%',
    data: legendData.value,
    textStyle: {
      fontSize: 16,
      color: '#E5E5E5'
    }
  },
  grid: {
    left: '8%',
    top: '20%',
  },
  xAxis: {
    data: xData.value,
    splitLine:{ show:false},
    axisTick:{
      show: true,//是否显示刻度
      lineStyle:{color:'#E5E5E5'}    // x轴刻度的颜色
    },
    axisLabel: {
      color: '#E5E5E5',// x轴字体颜色
      interval:0,//轴显示所有的数据
      fontSize: 16
    },
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color:'#232981'
      }
    },
    scale: true,
    axisTick:{
      show: true,//是否显示刻度
      textStyle: {
        fontSize: 18
      },
      lineStyle:{color:'#E5E5E5'}    // x轴刻度的颜色
    },
    axisLabel: {
      color: '#E5E5E5',// x轴字体颜色
      interval:0,//轴显示所有的数据
      fontSize: 16
    },
  },
  series: seriesData
};
let myChart = null
onMounted(() => {
  getData();
});
const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 256,
    limitScrollNum: 3,
  },
  scroll: true,
});
let num = 0
const carouselChange = (val, oldVal)=> {
  if (val==0) {
    num ++
    if (num == 1) {
      myChart && myChart.resize();
    }
  }
}
const getData = () => {
  leftBottom( { limitNum: 20 })
    .then((res) => {
      if (res.success) {
        state.list = res.data.list;
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const addressHandle = (item) => {
  let name = item.provinceName;
  if (item.cityName) {
    name += "/" + item.cityName;
    if (item.countyName) {
      name += "/" + item.countyName;
    }
  }
  return name;
};
</script>

<template>
  <div class="right-middle">
    <el-carousel ref="carouselRef" arrow="always" indicator-position="none" :initial-index="2" :interval="5000" height="350px"  @change="carouselChange">
      <el-carousel-item name="carousel-1" :key="0">
        <Chart
          :width="'100%'"
          :height="'340px'"
          :option="options"
          id="scatter-echarts"
          style="margin-left: 5% !important;"
      />
      </el-carousel-item>
      <el-carousel-item name="carousel-2" :key="1">
        <Vue3SeamlessScroll
            :list="state.list"
            :hover="true"
            :step="1"
            class="table"
        >
          <ul class="left_boottom">
            <li class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
              <span class="orderNum doudong">{{ i + 1 }}</span>
              <div class="inner_right">
                <div class="dibu"></div>
                <div class="flex">
                  <div class="info">
                    <span class="labels">处理人：</span>
                    <span class="text-content zhuyao doudong wangguan"> {{ item.gatewayno }}</span>
                  </div>
                  <div class="info">
                    <span class="labels">处理时间：</span>
                    <span class="text-content"> {{ item.createTime }}</span>
                  </div>
                </div>
                <div class="info addresswrap">
                  <span class="labels">用户姓名：</span>
                  <span class="text-content ciyao"> {{ item.userName }}</span>
                </div>
                <div class="info addresswrap">
                  <span class="labels">住址：</span>
                  <span class="text-content ciyao"> {{ addressHandle(item) }}</span>
                </div>
                <div class="info addresswrap">
                  <span class="labels">诉求描述：</span>
                  <span class="text-content ciyao"> {{ item.desc }}</span>
                </div>
              </div>
            </li>
          </ul>
        </Vue3SeamlessScroll>
      </el-carousel-item>
      <el-carousel-item name="carousel-3" :key="2">
        <Vue3SeamlessScroll
            :list="state.list"
            :hover="true"
            :step="1"
            class="table"
        >
          <ul class="left_boottom">
            <li class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
              <span class="orderNum doudong">{{ i + 1 }}</span>
              <div class="inner_right">
                <div class="dibu"></div>
                <div class="flex">
                  <div class="info">
                    <span class="labels">处理人：</span>
                    <span class="text-content zhuyao doudong wangguan"> {{ item.gatewayno }}</span>
                  </div>
                  <div class="info">
                    <span class="labels">处理时间：</span>
                    <span class="text-content"> {{ item.createTime }}</span>
                  </div>
                </div>
                <div class="info addresswrap">
                  <span class="labels">用户姓名：</span>
                  <span class="text-content ciyao"> {{ item.userName }}</span>
                </div>
                <div class="info addresswrap">
                  <span class="labels">住址：</span>
                  <span class="text-content ciyao"> {{ addressHandle(item) }}</span>
                </div>
                <div class="info addresswrap">
                  <span class="labels">诉求描述：</span>
                  <span class="text-content ciyao"> {{ item.desc }}</span>
                </div>
              </div>
            </li>
          </ul>
        </Vue3SeamlessScroll>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.text-content {
  font-size: 20px !important;
}
.table {
  height: 300px;
  overflow-y: hidden
}
.left_boottom {
  overflow: hidden;
  padding-left: 0;
  height: 100%;
}

.doudong {
  overflow: hidden;
  backface-visibility: hidden;
  color: #47ffff;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 20px;
    margin: 10px 0;
    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;
      .labels {
        flex-shrink: 0;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        // color: $primary-color;
        color: blurgba(0, 157, 255, 0.058)   
         }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 18px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 550px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("@/assets/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }
      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 20px;
      width: 80px;
      flex-shrink: 0;
    }

    .time {
      font-size: 20px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 20px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>
